<!-- 作者页面下的文章详情页 auart-->
<script setup>
import ArticleComment from '../main/ArticleComment.vue';
import ArticlePreview from '../../../../components/article/ArticlePreview.vue';
import { deleteArt } from '@/apis/article';
import { getArticleDetails, getPublicContentment } from '@/apis/article.js';
import { useRouter, useRoute } from 'vue-router';
import { ref } from 'vue';

// 使用路由
const router = useRouter();
// 跳转修改文章
const articleEditor = () => {
    router.push({
        path: '/editor',
        query: {
            modify: 1,
            aid: article.value.aid
        }
    })
}

// 删除
const deleteArticle = () => {
    confirm('确定删除？');
    deleteArt(article.value.aid).then(res => {
        router.push({
            path: '/userHome/article'
        })
    });
}

const article = ref({
    title: '',
    content: '',
    tags: [''],
    // 开启文章评论
    commentabled: true
})
const contentment = ref({})
const route = useRoute()
onMounted: {
    getArticleDetails(route.query.aid).then(res => {
        // console.log('作者文章页', res);
        article.value = res.data
    });
    getPublicContentment(route.query.aid).then(res => {
        // console.log('文章评论',res)
        contentment.value = res.data
    })
}

//判断权限
</script>

<template>
    <div style="min-height: 80vh;margin-top: 60px;">
        <el-row>
            <el-col :lg="4"></el-col>
            <el-col :lg="16" :xs="24">
                <el-card class="card">
                    <!-- 标签栏 -->
                    <div class="head">
                        <el-text class="title">{{ article.title }}</el-text>
                    </div>
                    <div class="tagLine">
                        <el-button type="success" size="small" @click="articleEditor">编辑文章</el-button>
                        <el-button type="danger" size="small" @click="deleteArticle">删除文章</el-button>
                        <el-text class="text" style="margin-left: 10px;">文章标签:</el-text>
                        <el-tag class="tag" v-for="tag in article.tags">{{ tag.name }}</el-tag>
                    </div>
                    <ArticlePreview :content="article.content" />
                </el-card>
            </el-col>
            <el-col :lg="4"></el-col>
        </el-row>
        <ArticleComment v-if="article.commentabled" :contentments="contentment" :aid="article.aid" />
    </div>
</template>

<style scoped>
.head {
    display: flex;
    margin-bottom: 10px;
}

.card {
    border-radius: 9px;
    width: 100%;
}

.title {
    font-size: 24px;
    font-weight: bolder;
    color: #000;
    padding-left: 16px;
    margin-bottom: 5px;
}

.text {
    font-size: 14px;
    color: #000;
    margin-right: 10px;
}

.iconfont {
    font-size: 25px;
}

.tagLine {
    margin-left: 16px;
    margin-bottom: 10px;
}

.tag {
    margin-right: 5px;
    margin-bottom: 5px;
}
</style>